  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      font-size: 12px;
      font-family: Microsoft Yahei, Arial, Helvetica, sans-serif;
      line-height: 1.15;
      box-sizing: border-box;
    }
    /** form css **/
    
    .audition {
      width: 100%;
      padding: 60px 0;
      background-color: #EFF5E4;
    }
    
    .box {
      margin: 0 auto;
      width: 1200px;
    }
    
    .book-t1 {
      font-size: 22px;
      font-weight: 400;
      text-align: center;
      color: #8FC320;
    }
    
    .book-t2 {
      margin-top: 23px;
      font-size: 48px;
      text-align: center;
      color: #8FC320;
    }
    
    .book-form {
      width: 1200px;
      height: 30px;
      margin: 50px auto;
    }
    
    .form-group {
      float: left;
      margin-left: 10px;
    }
    
    .form-group input {
      padding-left: 13px;
      width: 225px;
      height: 30px;
      font-size: 13px;
      font-weight: 400;
      border: 0;
      outline: none;
    }
    
    .form-group select {
      padding-left: 13px;
      width: 225px;
      height: 30px;
      font-size: 13px;
      font-weight: 400;
      color: #595757;
      border: 0;
      outline: none;
    }
    
    .form-btn {
      margin: 60px auto 0;
      border-radius: 16px;
      width: 148px;
      height: 33px;
      background-color: #8FC320;
      font-size: 21px;
      font-weight: 400;
      color: #fff;
      line-height: 33px;
      text-align: center;
      cursor: pointer;
    }
  </style>
  <div class="audition">
    <div class="box">
      <h1 class="book-t1">预约试听</h1>
      <h2 class="book-t2">book a demo class</h2>
      <div class="book-form">
        <div class="form-group">
          <input type="text" name="姓名" placeholder="宝宝姓名" />
        </div>
        <div class="form-group">
          <input type="text" name="电话" placeholder="家长电话" />
        </div>
        <div class="form-group">
          <select name="所在省份" class="form-control" id="p">
              <option value="" disabled selected hidden>选择省份</option>
          </select>
        </div>
        <div class="form-group">
          <select name="所在城市" class="form-control" id="c">
               <option value="" disabled selected hidden>选择城市</option>
          </select>
        </div>
        <div class="form-group">
          <select name="所在中心" class="form-control" id="d">
               <option value="" disabled selected hidden>选择中心</option>
          </select>
        </div>
      </div>
      <div class="form-btn" id="submit">马上预约</div>
    </div>
  </div>
  <script>
    var region = [{
      p: '浙江省',
      c: [{
        v: '杭州市',
        c: ['杭州水印城校区', '杭州昆仑公馆校区', '杭州北宸之光校区', '杭州嘉绿名苑校区', '杭州中粮方圆府校区', '杭州九堡校区', '杭州红苹果校区',
          '杭州武林校区', '杭州昆仑天籁校区',
          '杭州恒生科技园校区', '杭州星光天地校区', '杭州西城广场校区'
        ]
      }, {
        v: '绍兴市',
        c: ['绍兴柯桥校区', '绍兴金帝银泰城校区']
      }, {
        v: '宁波市',
        c: ['宁波鼓楼校区', '宁波江东校区']
      }, {
        v: '金华市',
        c: ['金华开隆商厦校区']
      }, {
        v: '温州市',
        c: ['温州南浦校区', '温州欧洲城校区', '温州汤家桥校区']
      }]
    }, {
      p: '上海市',
      c: [{
        v: '上海市',
        c: ['上海静安校区']
      }]
    }];

    var state = {
      pidx: -1,
      cidx: -1
    }

    $.each(region, function(index, value) {
      $('#p').append('<option value="' + value.p + '">' + value.p + '</option>');
    });

    $('#p').change(function() {
      var p = $('#p').val();

      $.each(region, function(index, value) {
        if (value.p == p) {
          state.pidx = index;
          state.cidx = 0;

          var html = '<option value="" disabled selected hidden>选择城市</option>';
          console.log(html);
          $.each(value.c, function(idx, val) {
            html += '<option value="' + val.v + '">' + val.v + '</option>';
          })
          $('#c').html(html);
        }
      })
      $('#d').html('<option value="" disabled selected hidden>选择城市</option>');
    })


    $('#c').change(function() {
      var c = $('#c').val();
      $.each(region[state.pidx].c, function(index, value) {
        if (value.v == c) {
          state.cidx = index;
          var html = '<option value="" disabled selected hidden>选择中心</option>';
          $.each(value.c, function(idx, val) {
            html += '<option value="' + val + '">' + val + '</option>';
          })
          $('#d').html(html);
        }
      })

    })

    $('#submit').on('click', function() {
      var data = {
        "姓名": $('input[name="姓名"]').val(),
        "电话": $('input[name="电话"]').val(),
        "所在省份": $('select[name="所在省份"]').val(),
        "所在城市": $('select[name="所在城市"]').val(),
        "所在中心": $('select[name="所在中心"]').val()
      }
      $.ajax({
        url: '/api/ss.form/1/3',
        type: 'post',
        dataType: 'json',
        data: JSON.stringify(data),
        headers: {
          'Content-Type': 'application/json'
        },
        success: function(res) {
          console.log(res);
          if (res.id) {
           alert('预约成功');
          }
        },
        error: function(e) {
          alert('系统正忙');
        }
      });
    })
  </script>
